<template>
  <!-- mapState使用： -->
  <h2>当前计数：{{ tCounter }}</h2>

  <!-- mapGetters使用： -->
  <h2>当前计数加倍：{{ doubleCounter }}</h2>
  <h2>{{ calCounter }}</h2>

  <!-- mapMutations使用： -->
  <button @click="decrement">-1</button>
  <button @click="increment">+1</button>
  <hr />

  <h3>延时一秒</h3>
  <!-- mapActions使用 -->
  <button @click="decrementAsyn">-1</button>
  <button @click="incrementAsyn">+1</button>

  <hr />
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"

export default {
  computed: {
    // mapState使用方法一：
    //...mapState(["counter"]),
    // mapState使用方法二：
    ...mapState({
      tCounter: (state) => state.counter,
    }),

    // mapGetters使用方法一：
    // ...mapGetters(["doubleCounter", "calCounter"]),
    //mapGetters使用方法二：
    ...mapGetters({
      doubleCounter: "doubleCounter",
      calCounter: "calCounter",
    }),
  },
  methods: {
    // mapMutations使用方法一：
    // ...mapMutations(["decrement", "increment"]),
    // mapMutations使用方法二：
    ...mapMutations({
      decrement: "decrement",
      increment: "increment",
    }),

    // mapActions使用方法一：
    // ...mapMutations(["decrementAsyn", "incrementAsyn"]),
    // mapActions使用方法二：
    ...mapActions({
      decrementAsyn: "decrementAsyn",
      incrementAsyn: "incrementAsyn",
    }),
  },
}
</script>

<style></style>
